<template>
  <div>
    <BasicTable
      @register="registerTable"
      :dataSource="tableData"
      rowKey="Id"
      title=""
      :columns="columns"
      :showIndexColumn="false"
      :clickToRowSelect="false"
      :bordered="true"
      :pagination="false"
      :canResize="false"
    >
      <template #headerCell="{ column }">
        <span>
          {{ column.customTitle }}
        </span>
        <!-- <template v-if="column.key === 'Description'">
          <span>
            {{ column.customTitle }}
          </span>
        </template>
        <template v-else>
          <span> {{ column.customTitle }}<span style="color: #ff4d4f">*</span> </span>
        </template> -->
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'IsEnable'">
          <span>
            <a-checkbox v-model:checked="record.IsEnable">{{
              record.Id === 0 ? '开' : '关'
            }}</a-checkbox>
          </span>
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { Checkbox } from 'ant-design-vue';
  const ACheckbox = Checkbox;
  const props = defineProps({
    list: {
      type: Object,
      default: () => {},
    },
  });
  console.log(`output->props`, props);

  const columns: BasicColumn[] = [
    {
      title: 'key',
      dataIndex: 'Id',
      width: 0,
    },
    {
      title: '',
      dataIndex: 'IsEnable',
      width: 100,
    },
    {
      title: '级别',
      dataIndex: 'AlarmLevel',
      edit: true,
      editable: true,
      isShowEditBtn: false,
      editComponent: 'Select',
      editComponentProps: {
        options: [
          {
            label: '信息',
            value: 0,
          },
          {
            label: '次要',
            value: 1,
          },
          {
            label: '一般',
            value: 2,
          },
          {
            label: '主要',
            value: 3,
          },
          {
            label: '严重',
            value: 4,
          },
        ],
      },
      width: 200,
    },
    {
      title: '描述',
      dataIndex: 'Description',
      edit: true,
      editable: true,
      editRule: true,
      isShowEditBtn: false,
      width: 200,
    },
  ];
  let tableData = ref([
    {
      Id: 1,
      AlarmLevel: '',
      Description: '',
      IsEnable: false,
    },
    {
      Id: 2,
      AlarmLevel: '',
      IsEnable: false,
      Description: '',
    },
  ]);
  // 设置值方法
  function setValue(val) {
    if (val.length >= 2)
      tableData.value = val.map((item, index) => {
        item.Id = index;
        return item;
      });
  }
  // 获取值方法
  function getValue() {
    return tableData.value.map((item, index) => {
      return {
        AlarmStringType: index === 0 ? '开' : '关',
        AlarmLevel: item.AlarmLevel,
        Description: item.Description,
        IsEnable: item.IsEnable,
        Value: index === 0,
        Uuid: item.Uuid || '',
      };
    });
  }
  defineExpose({ getValue, setValue });
  const [registerTable] = useTable();
</script>

<style scoped></style>
